<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="org.apache.velocity.runtime.directive.Include"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闲趣吧——感悟生活,分享快乐</title>
<link rel="shortcut icon" href="<%= basePath%>nresources/favicon.ico" /> 

<script type="text/javascript" src="<%= basePath%>nresources/njs/jquery.min.js"></script>


<script>
	function select(tab){
			var t = $("#tabs");
			var lilist = $("#tabs li");
			for(var i=0;i<lilist.length;i++){
				lilist[i].className="";
			}
			var divlist = $("#tabs div");
			for(var i=0;i<divlist.length;i++){
				divlist[i].className="";
			}
			tab.className="selected";
			document.getElementById(tab.id+"pane").className="selected";
		}
		$(document).ready(function(){
			$(".menutext a").attr("class","menu");
			$(".menutext a[art='${type}']").attr("class","menu_hover");
		});
</script>
<link href="<%= basePath%>nresources/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<%= basePath%>nresources/css/demo.css" type="text/css" />
<link rel="stylesheet" href="<%= basePath%>nresources/css/pagination.css"/>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%= basePath%>nresources/njs/jquery.pagination.js"></script>
<script src="<%= basePath%>nresources/njs/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: '<%= basePath%>nresources/images/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(){
					$('.caption').animate({
						bottom:-35
					},100);
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log(current);
					};
				}
			});
		});
	</script>
<link rel="stylesheet" href="<%= basePath%>nresources/css/global.css" />
</head>
<body>
  <div id="main">
    <div id="topheader"> </div>
    <jsp:include page="head.jsp"/>
    <div id="container">
		<div id="example">
			<div id="slides">
				<div class="slides_container">
					<div>
						<a href="##" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-1.jpg" width="935" height="270" alt="Slide 1"></a>
						<div class="caption" style="bottom:0">
							<p>枫叶</p>
						</div>
					</div>
					<div>
						<a href="##" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-2.jpg" width="935" height="270" alt="Slide 2"></a>
						<div class="caption">
							<p>出租车</p>
						</div>
					</div>
					<div>
						<a href="##" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-3.jpg" width="935" height="270" alt="Slide 3"></a>
						<div class="caption">
							<p>下雨天</p>
						</div>
					</div>
					<div>
						<a href="##" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-4.jpg" width="935" height="270" alt="Slide 4"></a>
						<div class="caption">
							<p>灯</p>
						</div>
					</div>
					<div>
						<a href="http://www.mobanwang.cn/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-5.jpg" width="935" height="270" alt="Slide 5"></a>
						<div class="caption">
							<p>&ldquo;爱&rdquo;</p>
						</div>
					</div>
					<div>
						<a href="##" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-6.jpg" width="935" height="270" alt="Slide 6"></a>
						<div class="caption">
							<p>mobanwang.com</p>
						</div>
					</div>
					<div>
						<a href="##" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="<%= basePath%>nresources/images/slide-7.jpg" width="935" height="270" alt="Slide 7"></a>
						<div class="caption">
							<p>Save my love for loneliness</p>
						</div>
					</div>
				</div>
				<!-- <a href="#" class="prev"><img src="<%= basePath%>nresources/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="<%= basePath%>nresources/images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> -->
			</div>
		</div>
	</div>
	  <div id="body_area">
      <div class="mid">
        <div class="right_div">
        	<h2 class = "comhead">最新文章<span>&nbsp;</span></h2>
	        <c:forEach var="art" items="${arts}" varStatus="s">
		        <div class="mainlist">
					<div class="mainlist_img"><a href="<%= basePath%>npage/${art.id}.html" title="${art.title }" target="_blank"><img src="<%= basePath%>${art.picpath }" alt="${art.title}" /></a></div>
						<div class="mainlist_content">
							<h1><a href="<%= basePath%>npage/${art.id}.html" target="_blank" title="${art.title }">${art.title}</a></h1>
								<div class="summary">
									<span>发布于<fmt:formatDate value="${art.createTime}" pattern="yyyy-MM-dd"/></span>&nbsp;&nbsp;&nbsp;&nbsp;
									<span>浏览次数:${art.visits }</span>
									<div class="height1"></div>
									${art.onlytext}
									<span class="comments"></span>
								</div>
						</div>
				</div>
			</c:forEach>
		</div>
		<nav style="background-color:#fff">
			<ul class="pagination  pagination-lg">
				<li><a href="<%= basePath%>main/${type}/1/query.do" title="首页">&laquo;</a></li>
				<c:forEach var="i" items="${index}" varStatus="s">
					<c:if test="${i==page }">
						<li class="active"><a href="<%= basePath%>main/${type}/${i}/query.do">${i}</a></li>
					</c:if>
					<c:if test="${i!=page }">
						<li ><a href="<%= basePath%>main/${type}/${i}/query.do">${i}</a></li>
					</c:if>
				</c:forEach>
				<li><a href="<%= basePath%>main/${type}/${endnum}/query.do" title="末页">&raquo;</a></li>
			</ul>
		</nav>
      </div>
      <script type="text/javascript">
	$.ajax({
				type:"get",
				url:"<%= basePath%>right.do",
				data:{},
				success:function(data){
					var json = JSON.parse(data);
					//加载热门文章
					var hotList = json.artRank
					$(".pane_ul").empty();
					for(var i=0;i<hotList.length;i++){
						$(".pane_ul").append('<li><a target="_blank" href="<%= basePath%>npage/'+hotList[i].id+'.html">'+hotList[i].title+'</a></li>');
					}
					//加载标签
					var tage = json.tags;
					$(".taglist").empty();
					for(var i=0;i<tage.length;i++){
						$(".taglist").append('<a href="<%= basePath%>tag/'+tage[i]+'/1/query.do" target="_blank">'+tage[i]+'</a>');
					}
				},
				dataTypd:"json",
				error:function(data){
					alert("加载失败");
				}
			});
</script>
<div class="right">
       <!--  <div class="search">
        	<form >
				<input type="text" name="word" class="text" onclick="this.select();" />
				<input type="submit" value="" class="button"/>
			</form>
		</div> -->
        <div class="services_area right_div">
			<h2 class = "comhead">热门文章</h2>
				<div id="tab1pane" class="selected">
					<ul class="pane_ul"></ul>
				</div>
        </div>
        <div class="webs right_div">
        	<h2 class = "comhead">推荐网址<span>&nbsp;</span></h2>
        	<div class="sidebar_blue_top"></div>
        	<div class="sidebar_blue_content">
						<div class="haourl">
							<a href="http://hao.360.cn" target="_blank">360网址</a> ┆
							<a href="http://www.hao123.com" target="_blank">Hao123</a> ┆
							<a href="http://tv.sohu.com/" target="_blank">搜狐视频</a><br />
							<a href="http://t.sina.com.cn" target="_blank" class="link1">新浪微博</a> ┆
							<a href="http://t.qq.com" target="_blank">腾讯微博</a> ┆
							<a href="http://baozoumanhua.com/" target="_blank">暴走漫画</a><br />
							<a href="http://www.56.com" target="_blank">56.Com</a> ┆
							<a href="http://www.tudou.com" target="_blank">土豆网</a>　 ┆
							<a href="http://www.qiyi.com" target="_blank">奇艺高清</a><br />
							<a href="http://www.dangdang.com/" target="_blank">当当网</a>　 ┆
							<a href="http://www.jd.com/" target="_blank">京东商城</a> ┆
							<a href="http://www.taobao.com/" target="_blank">淘宝</a><br />
						</div>
					</div>
					<div class="sidebar_blue_bottom"></div>
        </div>
          <div class="calendar_text1 right_div">
          	<h2 class = "comhead">
	          	<img src="../../../nresources/images/star.png" alt="Star" width="16" height="16" />
	          		热门标签
          	</h2>
          	<div class="sidebar_blue_content">
	          	<div class="taglist">
				</div>
			</div>
          </div>
</div>
    </div>
   </div>
   <div id="fottermain">
      <div id="fotter">
        <div class="fotter_linksarea">
          <div align="center"><a href="javascript:void(0);" class="fotter_link">首页</a> | <a href="javascript:void(0);" class="fotter_link">关于我们</a> | <a href="javascript:void(0);" class="fotter_link">成长发展</a> | <a href="javascript:void(0);" class="fotter_link">意见反馈</a> | <a href="javascript:void(0);" class="fotter_link">帮助中心</a></div>
        </div>
        <div class="fotter_copyrightsarea">
          <div align="center">如有问题请联系<a href="mailto:xianqu_bar@sina.com" target="_blank" class="copyrightslink">xianqu_bar@sina.com</a> ,我们将尽快解决。<a href="http://www.xianqubar.com" target="_blank" class="copyrightslink">感悟生活,分享快乐</a></div>
        </div>
        
      </div>
    </div>
</body>

</html>
